<template>
	<view class="page-body">
		<view class="page-section page-section-gap">
			<map style="width: 100vw; height: 40vh;" :scale="14" :latitude="latitude" :longitude="longitude"
				@callouttap="out" :markers="covers" @markertap="mark">
			</map>
		</view>
		<view class="bottom">
			<view class="top">
				附近共 {{this.num}} 家门店
			</view>
			<view class="content">
				<view class="content1" v-for="(item,index) in state" key="index">
					<view class="left">
						<img style="width: 100%;height: 15vh; margin-top: 3vh;border-radius: 12px;" :src="item.img"
							alt="">
					</view>
					<view class="right">
						<view style="font-size: 2.5vh;font-weight: 500;">
							{{item.title}}
						</view>
						<view style="font-size: 2vh">
							{{item.title1}}
						</view>
						<view class="biao">
							<view class="g0">
								新店
							</view>
							<view class="g1"
								:style="{'background-color':item.status==='营业中' ?'rgb(255, 94, 129)': 'rgb(255, 193, 45)' }">
								{{item.status}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 38.814354,
				longitude: 115.492087,
				num: 0,
				state: [{
					title: "号放假三法师的",
					title1: "愤怒我安稳办发布为",
					img: "https://img2.baidu.com/it/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
					status: "休息"
				}, {
					title: "号放假三法师的",
					title1: "愤怒我安稳办发布为",
					img: "https://img2.baidu.com/it/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
					status: "休息"
				}, {
					title: "号放假三法师的",
					title1: "愤怒我安稳办发布为",
					img: "https://img2.baidu.com/it/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
					status: "营业中"
				}, ],
				covers: [{
						id: 1,
						latitude: 38.814354,
						longitude: 115.492087,
						callout: { //自定义标记点上方的气泡窗口 点击有效
							content: "当前位置",
							display: "ALWAYS", //显示方式
							color: "#ffffff",
							fontSize: 12,
							bgColor: "#f76425",
							borderRadius: 5,
							padding: "10", //文本边缘留白，文字和边界宽度

						},
					},
					{
						id: 2,
						latitude: 38.81797,
						longitude: 115.487066,
						callout: { //自定义标记点上方的气泡窗口 点击有效
							content: "垃圾回收站1",
							display: "ALWAYS", //显示方式
							color: "#ffffff",
							fontSize: 12,
							bgColor: "#f76425",
							borderRadius: 5,
							width: 30,
							height: 30,
							padding: "10" //文本边缘留白，文字和边界宽度
						},
					},
					{
						id: 3,
						latitude: 38.808161,
						longitude: 115.497116,
						callout: { //自定义标记点上方的气泡窗口 点击有效
							content: "垃圾回收站2",
							display: "ALWAYS", //显示方式
							color: "#ffffff",
							fontSize: 12,
							bgColor: "#f76425",
							borderRadius: 5,
							padding: "10", //文本边缘留白，文字和边界宽度
							iconPath: ""
						},
					},

				]
			}
		},
		mounted() {
			this.setnum()
		},
		methods: {
			// 计算商家
			setnum() {
				console.log(this.state.length);
				let num = this.state.length
				this.num = num
			},
			onbtn() {
				this.sta = false
			},
			out(e) {
				console.log(e, 11111);
				this.sta = true
			},
			btn() {
				console.log(3333333);
				this.sta = !this.sta
			},
			mark(e) {
				console.log(e.detail.markerId, 22222222);
				let marker = this.covers.find(item => {
					return item.id == e.detail.markerId
				});
				console.log(marker.callout.content);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page-body {
		width: 100%;
		height: 100vh;

		.page-section page-section-gap {
			width: 100%;
			height: 40vh;
		}

		.bottom {
			width: 100%;
			height: 63vh;
			border-radius: 20px;
			background-color: white;
			position: absolute;
			top: 37%;
			overflow: hidden;

			.top {
				width: 100%;
				height: 8vh;
				text-align: left;
				padding-left: 5vh;
				line-height: 8vh;
				font-weight: 500;
				font-size: 2.5vh;
			}

			.content {
				width: 100%;
				height: 55vh;
				overflow-y: scroll;

				.content1 {
					width: 90%;
					height: 20vh;
					margin: 0 auto;
					display: flex;


					.left {
						width: 50%;
						height: 100%;
					}

					.right {
						width: 100%;
						height: 100%;
						line-height: 5vh;
						margin-top: 2vh;
						margin-left: 1vh;

						.biao {
							display: flex;

							.g0 {
								width: 10%;
								height: 3vh;
								margin-top: 1vh;
								margin-right: 5vh;
								background-color: rgba(255, 94, 129);
								padding: 0.6vh 3vh;
								color: white;
								line-height: 3.5vh;
								font-size: 1.5vh;
								border-top-left-radius: 12px;
								border-bottom-right-radius: 12px; 
							}

							.g1 {
								width: 10%;
								height: 3vh;
								margin-top: 1vh;
								padding: 0.6vh 3vh;
								color: white;
								line-height: 3.5vh;
								font-size: 1.5vh;
								border-top-left-radius: 12px;
								border-bottom-right-radius: 12px; 
							}

						}
					}
				}
			}
		}
	}
</style>